<template>
    <div class="navs">
        <div class="box">
            <ul>
                <template v-if='obj.account'>
                    <a href="#" class="user">
                        <i class="iconfont icon-user"></i>
                        {{obj.account}}</a>
                    <a href="#" @click="tui">退出登录</a>
                </template>
                <template v-else>
                    <a href="/#/login">请先登录</a>
                    <a href="#">免费注册</a>
                </template>
                <a href="#">我的订单</a>
                <a href="#">会员中心</a>
                <a href="#">帮助中心</a>
                <a href="#">关于我们</a>
                <a href="#">
                    <i class="iconfont icon-phone"></i>
                    <span>手机版</span>
                </a>
            </ul>
            <!-- {{obj}} -->
        </div>
    </div>
</template>


<script>
import store from '@/store/index'
export default {
    data() {
        return {
            obj:store.state.user.userInfo
        }
    },
    methods:{
        tui(){
            this.$store.commit("user/setUser",{})
            this.$router.push('/login')
            this.$message({text:'已退出',type:'warn'})
        }
    }
}
</script>


<style lang="scss">
.navs {
    width: 100%;
    height: 53px;
    background: #333333;

    ul {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: end;
        align-items: center;

        a {
            width: 100px;
            text-align: center;
            color: gray;
            border-right: 1px solid gray;
            text-decoration: none;
        }

        a:hover {
            color: #32b99c;
        }
    }

    a:last-child {
        border-right: none;
    }
}
.user{
    width: 120px !important;
    display: flex;
}
</style>